import 'package:flutter/material.dart';
import '../utils/index.dart';
import 'dart:async';
import '/styles/index.dart';
import '../apis/home.dart';
import './components/swiper.dart';
import './model.dart';
import './components/centenBox.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String time = '';  // 声明变量
  Timer? _timer;
  List<BannerItem> bannerList = [];

  @override
  void initState() {
    super.initState();
    time = formatDate(DateTime.now());  // 在 initState 中初始化

    // 添加 mounted 检查
    // _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
    //   if (mounted) {  // 确保组件还在树中
    //     setState(() {
    //       time = formatDate(DateTime.now());
    //     });
    //   }
    // });
    getBannerData();
  }

  Future<void> getBannerData() async {
    try {
      List<dynamic> data = await getBanner();
      setState(() {
        List<BannerItem> list = data.map((item) => BannerItem.fromJson(item)).toList();
        bannerList = list;
        print('bannerList: ${list}');
      });
    } catch (e) {
      print('error: ${e} data:}');
    }
  }
  @override
  void dispose() {
    _timer?.cancel();  // 取消定时器
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 主内容
          SingleChildScrollView(  // 使用 SingleChildScrollView 代替 ListView
            child: Column(
              children: [
                // 顶部区域
                Container(
                  height: 540,
                  width: double.infinity,
                  decoration: const BoxDecoration(
                    image: DecorationImage(
                      image: AssetImage('assets/images/bg.png'),
                      fit: BoxFit.cover,
                    ),
                  ),
                  child: Column(
                    children: [
                      SizedBox(height: MediaQuery.of(context).padding.top + 54),
                      // Banner
                      BannerSwiper(
                        bannerList: bannerList,
                        height: 140,
                      ),
                      SizedBox(height: 16),
                      CenterBox(
                        title: '开拓之旅，共创辉煌！',
                        imageUrl: 'assets/images/bg.png',
                        description: '您的随身能量伙伴充电宝...',
                      ),
                    ],
                  ),
                ),

                // 推荐标题
                // const Padding(
                //   padding: EdgeInsets.all(16),
                //   child: Align(
                //     alignment: Alignment.centerLeft,
                //     child: Text(
                //       '为你推荐',
                //       style: TextStyle(
                //         fontSize: 18,
                //         fontWeight: FontWeight.bold,
                //       ),
                //     ),
                //   ),
                // ),

                // 推荐列表

                Container(
                  // height: 100,
                  width: double.infinity,
                  color: Color(0xFFF5F5F5),
                  child:                 ListView.builder(
                  padding: const EdgeInsets.all(16),
                  shrinkWrap: true,
                  physics: const NeverScrollableScrollPhysics(),
                  itemCount: 4,
                  itemBuilder: (context, index) {
                    return Container(
                      margin: const EdgeInsets.only(bottom: 16),
                      padding: const EdgeInsets.all(12),
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(12),
                        boxShadow: [
                          BoxShadow(
                            color: Colors.black.withOpacity(0.1),
                            blurRadius: 5,
                          ),
                        ],
                      ),
                      child: Row(
                        children: [
                          Container(
                            width: 80,
                            height: 80,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(8),
                              color: Colors.grey[200],
                            ),
                            child: const Icon(Icons.image),
                          ),
                          const SizedBox(width: 12),
                          Expanded(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                const Text(
                                  '开拓之旅，共创辉煌！',
                                  style: TextStyle(
                                    fontSize: 16,
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                                const SizedBox(height: 8),
                                Text(
                                  '您的随身能量伙伴充电宝...',
                                  style: TextStyle(
                                    fontSize: 14,
                                    color: Colors.grey[600],
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                    );
                  },
                ),
                ),


              ],
            ),
          ),

          // 顶部导航栏
          Positioned(
            top: MediaQuery.of(context).padding.top,
            left: 0,
            right: 0,
            child: Container(
              padding: EdgeInsets.only(
                top: MediaQuery.of(context).padding.top,
                left: 16,
                right: 16,
              ),
              height: 44,
              child: Row(
                children: [
                  Image.asset(
                    'assets/images/logo.png',
                    height: 30,
                  ),
                  const Spacer(),
                  Container(
                    width: 32,
                    height: 32,
                    decoration: BoxDecoration(
                      color: Colors.white.withOpacity(0.2),
                      borderRadius: BorderRadius.circular(16),
                    ),
                    child: IconButton(
                      padding: EdgeInsets.zero,
                      onPressed: () {},
                      icon: Image.asset(
                        'assets/images/search_icon.png',
                        height: 20,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

